<template>
  <div>
    <span>
      <span v-if="!type">{{ realValue }}</span>
      <span v-if="type === 'stateText'">
        <span :style="{color: textColor}">● </span>
        <span>{{ realValue }}</span>
      </span>
      <span v-if="type === 'currency'">{{ realValue }}</span>
      <span v-if="type === 'date'">{{ realValue }}</span>
      <span v-if="type === 'number'">{{ realValue }}</span>
      <span v-if="type === 'specialText'">{{ realValue }}</span>
      <span v-if="type === 'click'" class="shy" @click="changedata">
        {{ realValue }}
      </span>
      <span v-if="type === 'switch'">
        <el-switch
          v-model="realValue"
          :active-text="activeText"
          :inactive-text="inactiveText"
          active-color="#2F54EB"
          inactive-color="#EFEFEF"
          @change="handleSwitchChange"
        />
      </span>
      <span v-if="type === 'select'">
        <el-select v-model="realValue" placeholder="请选择" style="width:100%;" disabled>
          <el-option
            v-for="family in familyOptions"
            :key="family.id"
            :label="family.label"
            :value="family.value"
          />
        </el-select>
      </span>
      <span v-if="type === 'status'">
        <!-- <el-select v-model="realValue" placeholder="请选择" style="width:100%;" disabled>
          <el-option
            v-for="status in statusOptions"
            :key="status.id"
            :label="status.label"
            :value="status.value"
          />
        </el-select> -->
        {{ statusOptions.find(item => item.value === realValue)?.label || '-' }}
      </span>
      <span v-if="type === 'stocktakingStatusOptions'">
        <!-- <el-select v-model="realValue" placeholder="请选择" style="width:100%;" disabled>
          <el-option
            v-for="status in statusOptions"
            :key="status.id"
            :label="status.label"
            :value="status.value"
          />
        </el-select> -->
        {{ stocktakingStatusOptions.find(item => item.value === realValue)?.label || '-' }}
      </span>
      <span v-if="type === 'checkbox'">
        <el-checkbox v-model="realValue" disabled />
      </span>

      <span v-if="type === 'ajaxCheckbox'">
        <el-checkbox v-model="realValue" @change="handleCheckBoxChange" />
      </span>
      <span v-if="type === 'input'">
        <el-input v-model="realValue" @blur="handleInputChange" />
      </span>
      <span v-if="type === 'array'">
        <span v-for="(item, arrayIndex) in value" :key="arrayIndex" style="display:block">
          <span v-for="(arrayTextItem, arrayTextIndex) in arrayText" :key="arrayTextIndex">
            <span>{{ arrayTextItem.label }}: {{ item[arrayTextItem.property] }} </span>
          </span>
        </span>
      </span>
      <el-image
        v-if="type === 'Image' && realValue!=='-'"
        style="width: 100px; height: 100px"
        :src="realValue"
        @click="showFile"
      />
      <a v-if="type === 'pdf' && realValue!=='-'" @click="showFile">
        <i class="el-icon-link" />Report
      </a>
      <a v-if="type === 'pdf2' && realValue!=='-'" @click="showFile">
        <i class="el-icon-link" />{{ realValue2 }}
      </a>
    </span>

      <span v-if="type === 'orderDetailStatus'">
        {{ orderDetailStatus.find(item => item.value === realValue)?.label || '-' }}
      </span>
  </div>
</template>

<script setup lang="ts" name="slTableText">
import { ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'

interface Props {
  baseUrl?: string
  currency?: string
  timeFormat?: string
  timeText?: string
  array?: Array<{value: string | number, label: string}>
  numberFormat?: number
  locale?: string
  value: string | number | Date | boolean | any[] | null | undefined
  type?: string
  textColor?: string
  activeText?: string
  inactiveText?: string
  index?: number
  arrayText?: Array<any>
}

const props = withDefaults(defineProps<Props>(), {
  baseUrl: '',
  currency: 'CNY',
  timeFormat: 'YYYY-MM-DD HH:mm:ss',
  timeText: '-',
  array: () => [],
  numberFormat: 2,
  locale: 'zh-cn',
  type: '',
  textColor: '#30384A',
  activeText: '',
  inactiveText: '',
  index: 0,
  arrayText: () => []
})

const emit = defineEmits<{
  (e: 'changeSwitch', value: any, index: number): void
  (e: 'changeInput', value: any, index: number): void
  (e: 'changeCheckBox', value: any, index: number): void
}>()

const { t } = useI18n()

const realValue = ref()
const realValue2 = ref('')
const arrayList = ref<string[]>([])
const searchDialog = ref(false)
const familyOptions = ref([
  { id:'CLOSED', value: 'CLOSED', label: 'CLOSED' },
  { id:'HOLD', value: 'HOLD', label: 'HOLD' }
])

const statusOptions = ref([
  { id:'0', value: 0, label: '正常' },
  { id:'1', value: 1, label: '冻结' }
])

const stocktakingStatusOptions = ref([
  { id:'0', value: 0, label: '待盘点' },
  { id:'1', value: 1, label: '待处置' },
  { id:'2', value: 2, label: '盘点完成' },
  { id:'3', value: 3, label: '已取消' }
])

const orderDetailStatus = ref([
  { id:'0', value: 0, label: '未开始' },
  { id:'1', value: 1, label: '进行中' },
  { id:'2', value: 2, label: '已完成' },
  { id:'3', value: 3, label: '暂停' },
  { id:'4', value: 4, label: '取消' },
  { id:'5', value: 5, label: '异常' },
])


const getValue = () => {
  if (props.type !== 'input' && props.type !== 'click') {
    realValue.value = props.value === '' ? '-' : props.value
  }

  if (!props.type) return

  switch (props.type) {
    case 'status':
      realValue.value = props.value
      break
    case 'select':
      realValue.value = props.value
      break
    case 'array':
    console.log(props.array)
    console.log(props.arrayText)
    console.log(props.value)
      const found = props.array.find(item => item.value === props.value)
      console.log(found)
      if (found) realValue.value = found.label
      break
    case 'stateText':
      break
    case 'currency':
      realValue.value = (props.value as number).toLocaleString(props.locale, { 
        style: 'currency', 
        currency: props.currency 
      })
      break
    case 'date':
      const formattedDate = props.value ? dayjs(props.value.toString()).format(props.timeFormat) : props.timeText
      realValue.value = formattedDate === 'Invalid date' ? props.timeText : formattedDate
      break
    case 'number':
      if (props.value === null || props.value === '' || props.value === undefined) {
        realValue.value = ''
      } else {
        realValue.value = (props.value as number).toFixed(props.numberFormat)
      }
      break
    case 'Image':
    case 'pdf':
      realValue.value = props.value !== '-' ? props.baseUrl + props.value : '-'
      break
    case 'pdf2':
      realValue2.value = (props.value as string).split('inprocess/')[1]
      realValue.value = props.value !== '-' ? props.baseUrl + props.value : '-'
      break
  }
}

const handleSwitchChange = () => {
  emit('changeSwitch', realValue.value, props.index)
}

const handleInputChange = () => {
  emit('changeInput', realValue.value, props.index)
}

const handleCheckBoxChange = () => {
  emit('changeCheckBox', realValue.value, props.index)
}

const showFile = () => {
  if (realValue.value === '-') return
  window.open(realValue.value)
}

const changedata = () => {
  arrayList.value = (realValue.value as string).split(',')
  searchDialog.value = true
}

watch(() => props.value, () => {
  getValue()
})

onMounted(() => {
  getValue()
})
</script>

<style scoped>
.shy{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.teableio{
  overflow: hidden;
  overflow-y: auto;
}
.el-table--medium td, .el-table--medium th {
    text-align: center;
    padding: 0;
}

</style>
